<!DOCTYPE html>
<html lang="utf=8" xmlns:th="http://www.thymeleaf.org">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成交通知书</title>
    <style>
        .common-box{
            width: 100%;
            margin: auto;
        }
        .common-title{
            margin: 33px 0 15px 0;
            font-size: 30px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            text-align: center;
        }
        .common-content__item{
            height: 100%;
            border: 1px solid rgba(104, 122, 149, 0.85);
            margin-bottom: 20px;
        }
        .common-content__title{
            font-size: 13px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            margin: 0;
            height: 48px;
            line-height: 48px;
            background: #E4E8F2;
            padding-left: 20px;
            border-bottom: 1px solid rgba(104, 122, 149, 0.85);
        }
        .common-content__left{
            color: rgba(0, 0, 0, 0.85);
            text-align: right;
            padding-right: 8px !important;
            background: #F5F6FA;
            float: left;
            border-right: 1px solid rgba(104, 122, 149, 0.85);
            /* border-bottom: 1px solid rgba(104, 122, 149, 0.85); */
        }
        .common-content__right {
            color: rgba(0, 0, 0, 0.65);
            background: #fff;
            padding-left: 8px !important;
            float: left;
            /* border-bottom: 1px solid rgba(104, 122, 149, 0.85); */
        }
        .common-col__style {
            border-bottom: 1px solid rgba(104, 122, 149, 0.85);
            min-height: 45px;
            line-height: 2.5;
            font-size: 9px;
        }
        .common-no-border-bottom {
            border-bottom: none;
        }
        .common-table-box {
            padding: 20px;
        }
        .receipt-box{
            text-align: right;
            color: rgba(0, 0, 0, 0.45);
            margin-bottom: 20px;
        }
        .common-border-right {
            border-right: 1px solid rgba(104, 122, 149, 0.85);
        }
        .zl-row {
            position: relative;
            box-sizing: border-box;
        }
        .zl-row::before, .zl-row::after {
            display: table;
            content: "";
        }
        .zl-row{
            *zoom: 1;
        }
        .zl-row::after{
            clear: both;
        }
        .zl-col {
            float: left;
            box-sizing: border-box;
        }
        .zl-col-15 {
            width: 15%;
        }
        .zl-col-30 {
            width: 30%;
        }
        .zl-col-50 {
            width: 50%;
        }
        .zl-col-70 {
            width: 70%;
        }
        .zl-col-85 {
            width: 85%;
        }
        .zl-col-100 {
            width: 100%;
        }
        /* 表格 */
        .common-table {
            width: 100%;
            padding: 1px;
            border-spacing: 0px;
        }
        .common-table thead{
            background-color: #F5F6FA;
            height: 40px;
            color: rgba(0, 0, 0, 0.85);
            font-size: 12px;
        }
        .common-table thead th{
            border-bottom: 1px solid rgba(104, 122, 149, 0.85);
        }
        .common-table tbody tr td{
            border-bottom: 1px solid rgba(126, 142, 165, 0.35);
            font-size: 10px;
        }
        .common-table tbody tr {
            text-align: center;
            height: 48px;
            color: rgba(0, 0, 0, 0.65);
        }
        .tips-box {
            color: red;
            margin-bottom: 20px;
        }
        .common-single__qizhang{
            text-align: right;
            padding-right: 100px;
        }







    </style>
</head>
<body>
<div class="common-box" >
    <p class="common-title">成交通知书</p>
    <div class="common-content__item">
        <!-- 基本信息 -->
        <div class="zl-row">
            <div class="zl-col zl-col-100">
                <p class="common-content__title">询单基本信息</p>
            </div>
            <div class="zl-col zl-col-50">
                <div class="zl-row">
                    <div class="zl-col zl-col-30 common-content__left common-col__style">
                        询单编号
                    </div>
                    <div class="zl-col zl-col-70 common-content__right common-col__style common-border-right"
                         th:text="${data.inquireCode}">
                    </div>
                </div>
            </div>
            <div class="zl-col zl-col-50">
                <div class="zl-row">
                    <div class="zl-col zl-col-30 common-content__left common-col__style">
                        询单名称
                    </div>
                    <div class="zl-col zl-col-70 common-content__right common-col__style">
                        <span th:text="${data.inquireName}"></span>
                    </div>
                </div>
            </div>
            <div class="zl-col zl-col-50">
                <div class="zl-row">
                    <div class="zl-col zl-col-30 common-content__left common-col__style">
                        关联数据名称
                    </div>
                    <div class="zl-col zl-col-70 common-content__right common-col__style common-border-right"
                         th:text="${data.relationName}">
                    </div>
                </div>
            </div>
            <div class="zl-col zl-col-50">
                <div class="zl-row">
                    <div class="zl-col zl-col-30 common-content__left common-col__style">
                        关联数据编号
                    </div>
                    <div class="zl-col zl-col-70 common-content__right common-col__style">
                        <span th:text="${data.relationCode}"></span>
                    </div>
                </div>
            </div>
            <div class="zl-col zl-col-100">
                <div class="zl-row">
                    <div class="zl-col zl-col-15 common-content__left common-col__style">
                        成交单位
                    </div>
                    <div class="zl-col zl-col-85 common-content__right common-col__style">
                        <span>
                            <span th:text="${data.supplierName}"></span>供应商
                        </span>
                        <span>经过在招商局集团电子招标采购交易平台集采专区上的询单流程，你方报价已被采购人选中</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 报价清单 -->
        <div class="zl-row">
            <div class="zl-col zl-col-100">
                <p class="common-content__title">报价清单</p>
            </div>
            <div class="zl-col zl-col-100">
                <table id="arrivalTable" class="common-table">
                    <thead>
                    <th>序号</th>
                    <div th:each="m:${data.header}">
                        <th th:text="${m}"></th>
                    </div>
                    </thead>
                    <tr th:each="row,rowStat:${data.rows}">
                        <td th:text="${rowStat.index}"></td>
                        <td th:text="${row}"></td>
                    </tr>
                </table>
            </div>
        </div>
        <!-- 备注 -->
        <div class="zl-row">
            <div class="zl-col zl-col-100">
                <p class="common-content__title">备注</p>
            </div>
            <div class="zl-col zl-col-100">
                <div class="zl-row">
                    <div class="zl-col zl-col-100 common-single__item common-col__style">
                        <span th:text="${data.dealRemark}"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="zl-row">
            <div class="zl-col zl-col-100">
                <div class="zl-row">
                    <div class="zl-col zl-col-100 common-single__item common-single__qizhang">
                        <p>采购人：<span th:text="${data.purchaseName}"></span></p>
                        <p>创建日期：<span th:text="${data.createTime}"></span></p>
                        <p>签章位置</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tips-box">
        注：为进一步明确双方权力与义务，建议尽快完成电子采购订单或签署合同
    </div>
</div>
</body>
</html>